<template>
  <div class='container'>
    <el-row>
      <el-col>
        <el-card>

          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">

            <div class="table-wrapper">
              <el-table
                :data="roleList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  prop="role"
                  label="角色"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="account"
                  label="用户名"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="电话"
                  align='center'
                >
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  :formatter="formatDate"
                  label="添加时间"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="updata_time"
                  :formatter="formatDate"
                  label="最后登录"
                  align='center'>
                </el-table-column>
                <el-table-column
                  align='center'
                  label="操作">
                  <template slot-scope='scope'>
                    <el-col>
                      <el-button
                        type="text"
                        size="mini"
                        @click='showDialog(1,scope.row)'
                      >
                        编辑
                      </el-button>
                      <!--                      <el-button-->
                      <!--                        type="text"-->
                      <!--                        size="mini"-->
                      <!--                        @click='goBusiness(scope.row)'-->
                      <!--                      >-->
                      <!--                        禁止-->
                      <!--                      </el-button>-->
                      <el-button
                        type="text"
                        size="mini"
                        @click='showDelDialog(scope.$index,scope.row)'
                      >
                        删除
                      </el-button>
                    </el-col>
                  </template>
                </el-table-column>
              </el-table>

              <div class="table-footer">
                <el-row>
                  <el-col>
                    <el-button @click="showDialog(0)" size="small">
                      添加
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>

          <!-- 删除提示框 -->
          <el-dialog title="提示" :visible.sync="delVisible" width="300px" center :modal-append-to-body="false">
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="delVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteRow()">确 定</el-button>
            </div>
          </el-dialog>

          <!-- 编辑提示框 -->
          <el-dialog :visible.sync="dialogFormVisible" width="500px" max-height="500px" center
                     :modal-append-to-body="false">
            <div class="el-dialog-div">

              <el-row>
                <el-form class="form" label-width="100px" :model="userParams">
                  <el-col>
                    <el-form-item label="角色">
                      <el-select v-model="value" @change="getRoleId(value)" placeholder="请选择" style="width:100%">
                        <el-option
                          v-for="item in roleIdList"
                          :key="item.id"
                          :label="item.role"
                          :value="item.id">
                          <span style="float: left">{{ item.role }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="用户名">
                      <el-input v-model="userParams.account" size="mini" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                      <el-input v-model="userParams.name" size="mini" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="userParams.password" size="mini" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                      <el-input v-model="userParams.mobile" size="mini" placeholder="请输入电话"></el-input>
                    </el-form-item>

                    <el-form-item label="身份">
                      <el-radio-group v-model="checkedRadio" @change="getRadio">
                        <el-radio label="1" border size="medium">管理员</el-radio>
<!--                        <el-radio label="2" border size="medium">代理商</el-radio>-->
                      </el-radio-group>
                    </el-form-item>
<!--                    <el-form-item label="代理商等级" v-if="checkedRadio == 2">-->
<!--                      <el-select v-model="value" placeholder="请选择" style="width:100%">-->
<!--                        <el-option-->
<!--                          v-for="item in levelList"-->
<!--                          :key="item.value"-->
<!--                          :label="item.label"-->
<!--                          :value="item.value">-->
<!--                          <span style="float: left">{{ item.label }}</span>-->
<!--                        </el-option>-->
<!--                      </el-select>-->
<!--                    </el-form-item>-->
                  </el-col>
                  <el-col :span="18" :offset="4">
                    <el-form-item>
                      <el-button v-if="num==0" @click="addRole()">添加</el-button>
                      <el-button v-if="num==1" @click="changeRole()">修改</el-button>
                      <el-button @click="clearListSearch">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { formatDate } from 'src/utils/utils'
import { adminList, addUser, roleList, changeUser, delUser } from '../../api/api'


export default {
  data () {
    return {
      num: '',
      dialogFormVisible: false,
      roleList: [],
      roleIdList: [],
      loading: true,
      userParams: {
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId'),
        ID: '',
        account: '',
        name: '',
        password: '',
        mobile: '',
        regulatoryArea: [], // 监管地区
        operationArea: '', // 运营地区
        arealist: [[]] // 这个里面是多维数组    默认有一个空数组
      },
      deleteId: '',
      pageTotal: 0,
      goodsFuncParams: {
        index: 0,
        id: '',
        type: ''
      },
      value: '',
      multipleSelection: [],
      delVisible: false,
      checkedRadio: '1',
      selectedOptions: [],
      levelList: [{
        value: '1',
        label: '省级代理'
      }, {
        value: '2',
        label: '市级代理'
      }, {
        value: '3',
        label: '区级代理'
      }],
      operationList: []
    }
  },
  mounted () {
    this.getGoodsList()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 格式化表单数据
    clearForm () {
      this.userParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.checkedRadio = '1'
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
    },
    showDialog (num, row) {
      this.num = num
      if (row) {
        this.userParams.ID = row.id
        this.userParams.mobile = row.mobile
        this.userParams.account = row.account
        this.userParams.name = row.name
        this.userParams.password = row.password
      }
      this.dialogFormVisible = true
      const para = Object.assign({})
      roleList(para).then(res => {
        console.log(res)
        this.roleIdList = res.data
      })
    },

    // 表格数据
    getGoodsList (type) {
      this.roleList = []
      const para = Object.assign({}, this.userParams)
      adminList(para).then(res => {
        console.log(res)
        this.roleList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.userParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.userParams.pageSize = val
      this.getGoodsList()
    },
    addRole () {
      const para = Object.assign({}, this.userParams, {
        roleId: this.roleId
      })
      addUser(para).then(res => {
        console.log(res)
        this.getGoodsList()
      })
    },
    formatDate (row, column) {
      let date = row[column.property]
      date = new Date(date)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    getRoleId (roleId) {
      this.roleId = roleId
    },
    getRadio () {
      console.log(this.checkedRadio)
    },
    changeRole () {
      const para = Object.assign({}, this.userParams, {
        roleId: this.roleId
      })
      changeUser(para).then(res => {
        console.log(res)
      })
    },
    showDelDialog (index, row) {
      this.delVisible = true
      this.deleteId = row.id
    },
    deleteRow () {
      const para = Object.assign({}, this.userParams, {
        deleteId: this.deleteId
      })
      delUser(para).then(res => {
        console.log(res)
        this.getGoodsList()
        this.delVisible = false
      })
    },

    // 添加
    add () {
      this.userParams.arealist.push([])
    },
    // 删除
    del (index) {
      let list = this.userParams.arealist
      if (list.length === 1) {
        this.userParams.arealist = [[]]
      } else {
        this.userParams.arealist.splice(index, 1)
      }
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    /*.el-dialog-div {*/
    /*  max-height: 60vh;*/
    /*  overflow-y: auto;*/
    /*}*/

  }
</style>
